<!-- 盘点单信息详情界面 -->
<template>
    <!--基本信息-->
    <div class="white-container">
        <!--头部-->
        <div class="header-row">
            <h3 class="title">盘点单号：{{ checkform.code }}</h3>
            <div class="btn-group">
                <el-button @click="ShowUpdate" v-if="['草稿'].includes(checkform.status)">编辑</el-button>
                <el-button @click="ShowDelete" v-if="['草稿', '有盈亏', '无盈亏'].includes(checkform.status)">删除</el-button>
                <el-button v-if="['有盈亏'].includes(checkform.status)" @click="ShowExecute">执行</el-button>
                <el-button @click="showPrintDialog">打印</el-button>
            </div>
        </div>
        <hr style="border:1px solid #ccd0d4;"/>

        <div class="info-content">
             <table class="info-table">
                <tbody>
                    <tr>
                        <td>制单人</td>
                        <td>{{ checkform.createname }}</td>
                        <td>制单时间</td>
                        <td>{{ checkform.createtime }}</td>
                    </tr>
                    <tr>
                        <td>盘点类型</td>
                        <td>{{ checkform.type }}</td>
                        <td>仓库</td>
                        <td>{{ checkform.whname }}</td>
                    </tr>
                    <tr>
                        <td>开始时间</td>
                        <td>{{ checkform.start_time }}</td>
                        <td>结束时间</td>
                        <td>{{ checkform.end_time }}</td>
                    </tr>
                    <tr>
                        <td>经办人</td>
                        <td>{{ checkform.username }}</td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td colspan="5">{{ checkform.remark }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="status-box">
                <div class="status-label">单据状态</div>
                <div class="status-value">{{ checkform.status }}</div>
            </div>
        </div>
    </div>

    <!--相关信息-->
    <div class="white-container">
        <el-tabs class="demo-tabs" style="margin-left: 20px;" v-model="activeTab">
            <el-tab-pane label="其他信息" name="first">
                <div style="text-align: left;">
                    <b style="font-size: 16px;">附件</b>
                    <div v-if="filelist.length === 0" style="color: #aaa; margin-top: 10px;">暂无附件</div>
                    <div v-else style="margin-top: 10px;">
                        <div v-for="(file, idx) in filelist" :key="idx" style="margin-bottom: 8px;">
                            <a :href="file.url" target="_blank" style="color: green; font-size: 15px; text-decoration: none;">
                            {{ file.name }}
                            </a>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="盘点明细" name="second">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="checkData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="proc_name" label="货品名称" width="150"/>
                        <el-table-column prop="proc_code" label="货品编号" width="150" />
                        <el-table-column prop="proc_model" label="规格型号" width="120" />
                        <el-table-column prop="proc_primary_unit" label="单位" width="80" />
                        <el-table-column prop="type_name" label="货品类型" width="120" />
                        <el-table-column prop="stk_hand_num" label="账面数量" width="100">
                            <template #default="scope">
                                {{ scope.row.stk_hand_num || 0 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="stk_total" label="账面金额" width="120">
                            <template #default="scope">
                                {{ scope.row.stk_total ? Number(scope.row.stk_total).toFixed(2) : '0.00' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="icd_num" label="实盘数量" width="100"/>
                        <el-table-column prop="icd_price" label="参考单价" width="120">
                            <template #default="scope">
                                {{ scope.row.icd_price ? Number(scope.row.icd_price).toFixed(2) : '0.00' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="profitandloss_num" label="盈亏数量" width="100">
                            <template #default="scope">
                                <span :style="{ color: scope.row.profitandloss_num > 0 ? '#67C23A' : (scope.row.profitandloss_num < 0 ? '#F56C6C' : 'inherit') }">
                                    {{ scope.row.profitandloss_num || 0 }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="profitandloss_total" label="盈亏金额" width="120">
                            <template #default="scope">
                                <span :style="{ color: scope.row.profitandloss_total > 0 ? '#67C23A' : (scope.row.profitandloss_total < 0 ? '#F56C6C' : 'inherit') }">
                                    {{ scope.row.profitandloss_total ? Number(scope.row.profitandloss_total).toFixed(2) : '0.00' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="icd_status" label="盘点状态" width="120">
                            <template #default="scope">
                                <el-tag 
                                    :type="scope.row.profitandloss_num > 0 ? 'success' : (scope.row.profitandloss_num < 0 ? 'danger' : 'info')"
                                    effect="plain"
                                >
                                    {{ scope.row.icd_status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" width="200"/>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">货品种类: <b style="color: #e6a23c;">{{ summary.totalItemTypes }}</b></span>
                            <span class="summary-item">盘点数量: <b style="color: #e6a23c;">{{ summary.totalQuantity }}</b></span>
                            <span class="summary-item">盘盈数量: <b style="color: #67C23A;">{{ summary.totalProfitQty }}</b></span>
                            <span class="summary-item">盘亏数量: <b style="color: #F56C6C;">{{ summary.totalLossQty }}</b></span>
                            <span class="summary-item">盘盈金额: <b style="color: #67C23A;">{{ summary.totalProfitAmount }}</b></span>
                            <span class="summary-item">盘亏金额: <b style="color: #F56C6C;">{{ summary.totalLossAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane> 
            <el-tab-pane label="出库记录" name="third">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="outstockData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="out_code" label="出库单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowOutStockInfo(scope.row)">{{ scope.row.out_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="out_date" label="出库日期"  width="200"/>
                        <el-table-column prop="wh_name" label="仓库名称" width="150" />
                        <el-table-column prop="proc_list" label="出库货品"  width="200"/>
                        <el-table-column prop="out_num" label="出库数量" width="150" />
                        <el-table-column prop="out_total" label="出库金额" width="150" />
                        <el-table-column prop="out_user" label="经办人" width="120"/>
                        <el-table-column prop="create_name" label="制单人" width="120"/>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">总出库数量: <b style="color: #e6a23c;">{{ outstockSummary.totalNum }}</b></span>
                            <span class="summary-item">总出库金额: <b style="color: #e6a23c;">{{ outstockSummary.totalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="入库记录" name="fourth">
                <div style="text-align:left;">
                    <el-button @click="Export">导出</el-button>
                    <el-table :data="instockData" style="width: 100%" @selection-change="SelectChange">
                        <el-table-column type="selection" width="60"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="in_code" label="入库单号" width="150">
                            <template #default="scope">
                                <el-button style="color: green;cursor: pointer;" type="text" @click="ShowInStockInfo(scope.row)">{{ scope.row.in_code }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="in_type" label="入库类型" width="150" />
                        <el-table-column prop="in_date" label="入库日期"  width="200"/>
                        <el-table-column prop="wh_name" label="仓库名称" width="150" />
                        <el-table-column prop="proc_list" label="入库货品"  width="200"/>
                        <el-table-column prop="in_num" label="入库数量" width="150" />
                        <el-table-column prop="in_total" label="入库金额" width="150" >
                            <template #default="scope">
                                {{ scope.row.in_total.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="in_user" label="经办人" width="120"/>
                        <el-table-column prop="create_name" label="制单人" width="120"/>
                        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
                    </el-table>
                    <div class="summary-row">
                        <span>合计</span>
                        <div>
                            <span class="summary-item">总入库数量: <b style="color: #e6a23c;">{{ instockSummary.totalNum }}</b></span>
                            <span class="summary-item">总入库金额: <b style="color: #e6a23c;">{{ instockSummary.totalAmount }}</b></span>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        
        </el-tabs>
    </div>


    <!-- 底部操作栏 -->
    <div class="action-bar">
        <el-button @click="Close">关闭</el-button>
    </div>

    <!--删除模态框-->
    <el-dialog v-model="DeleteDialogVisible" width="400" style="text-align: left;"  align-center>
        <span>确定删除该盘点单吗?</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-on:click="DeleteDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="Delete()">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!--执行模态框-->
    <el-dialog v-model="ExecuteDialogVisible" width="400" style="text-align: left;" align-center>
        <span>确定执行该盘点单吗? 执行后将自动生成出入库单处理盘盈盘亏。</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-on:click="ExecuteDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="Execute">确定</el-button>
            </div>
        </template>
    </el-dialog>

     <!--打印模态框-->
     <el-dialog v-model="printDialogVisible" width="500" >
            <div id="print-area" style="display: flex; align-items: center;">
                <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
                    <QrcodeVue :value="checkform.code" :size="100" />
                    <span style="color: red; margin-top: 8px;">{{ checkform.code }}</span>
                </div>
                    <table border="1" style="border-collapse: collapse; width: 220px;">
                        <thead>
                            <tr>
                                <td>盘点单号</td>
                                <td>{{ checkform.code }}</td>
                            </tr>
                            <tr>
                                <td>仓库名称</td>
                                <td>{{ checkform.whname }}</td>
                            </tr>
                            <tr>
                                <td>经办人</td>
                                <td>{{ checkform.username }}</td>
                            </tr>
                        </thead>
                    </table>
            </div>
            <template #footer>
                <el-button class="no-print" @click="printDialogVisible = false">取消</el-button>
                <el-button class="no-print" type="primary" @click="handlePrint">打印</el-button>
            </template>
    </el-dialog>
</template>
  
<script>
import {ref,reactive,onMounted,computed} from 'vue';
import http from '../auth/index';
import { ElMessage,ElMessageBox } from 'element-plus'; //提示信息
import { useRoute,useRouter  } from 'vue-router';//路由
import * as XLSX from 'xlsx';

export default {
    setup(){

        const route = useRoute();//路由（获取参数）
        const router = useRouter();//路由（实现跳转）
        //获取到传过来的checkid和checkcode
        const checkid = route.params.checkid;
        const checkcode = route.params.checkcode;
        //当前用户信息
        const user = JSON.parse(sessionStorage.getItem("user"));

        //日期转换格式
        function formatDateTime(date) {
            if (!date) return "";
            if (typeof date === 'string') {
                date = new Date(date);
            }
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }

        //查询所有单据状态
        const status=ref([]);
        function GetStatus(){
            return http.get("/BusinessType/GetBusinessTypes?field=盘点")
            .then(res=>{
                status.value=res.data;
            }).catch(err=>{
                console.log(err);
            })
        }
         // 状态映射计算属性
         const statusMap = computed(() => {
            const map = {};
            if (status.value && status.value.length > 0) {
                status.value.forEach(item => {
                    map[item.bus_id] = item.bus_name;
                });
            }
            return map;
        });

        // 盘点单状态映射
        function getCheckStatus(status) {
            const statusMap = {
                '1': '草稿',
                '2': '有盈亏',
                '3': '无盈亏',
                '4': '已完成'
            };
            return statusMap[status] || '未知状态';
        }

        //盘点单信息
        const checkform=reactive({
            code: checkcode,
            createname: "",
            createtime: "",
            type: "",
            whname: "",
            start_time: "",
            end_time: "",
            username: "",
            status: "",
            check_num: 0,
            checkprofit_num: 0,
            checklosses_num: 0,
            checkprofit_total: 0,
            checklosses_total: 0,
            remark: "",
        })

        const selectdata=ref([]);//选中数据
        //获取选中数据
        function SelectChange(val){
            selectdata.value=val;
        }

        //导出
        function Export(){
            if(selectdata.value.length==0){
                ElMessage({
                    message: '请选择要导出的数据.',
                    type: 'warning',
                })
                return;
            }
            // 创建工作簿
            const wb = XLSX.utils.book_new();
            // 准备数据
            const excelData = selectdata.value.map((row) => ({
                "盘点单号": checkform.code,
                "货品名称": row.proc_name,
                "货品编号": row.proc_code,
                "规格型号": row.proc_model,
                "单位": row.proc_primary_unit,
                "货品类型": row.type_name,
                "账面数量": row.stk_hand_num || 0,
                "账面金额": row.stk_total ? Number(row.stk_total).toFixed(2) : '0.00',
                "实盘数量": row.icd_num,
                "参考单价": row.icd_price ? Number(row.icd_price).toFixed(2) : '0.00',
                "盈亏数量": row.profitandloss_num || 0,
                "盈亏金额": row.profitandloss_total ? Number(row.profitandloss_total).toFixed(2) : '0.00',
                "盘点状态": row.icd_status,
                "备注": row.remark || '',
            }));
            // 创建工作表
            const ws = XLSX.utils.json_to_sheet(excelData);
            // 添加到工作簿
            XLSX.utils.book_append_sheet(wb, ws, "盘点明细单");
            // 导出并下载
            XLSX.writeFile(wb, `盘点明细单_${checkform.code}_${new Date().toLocaleDateString()}.xlsx`);
            
            ElMessage.success(`已成功导出${selectdata.value.length}条记录`);
        }

        //附件
        const filelist = ref([])

        // 控制活动标签
        const activeTab = ref('second');

        //盘点明细
        const checkData=ref([]);

        //合计计算
        const summary = computed(() => {
            if (!checkData.value || checkData.value.length === 0) {
                return {
                    totalItemTypes: 0,
                    totalQuantity: 0,
                    totalProfitQty: 0,
                    totalLossQty: 0,
                    totalProfitAmount: '0.00',
                    totalLossAmount: '0.00'
                };
            }

            const totalItemTypes = checkData.value.length;
            const totalQuantity = checkData.value.reduce((sum, item) => sum + Number(item.icd_num || 0), 0);
            
            // 盘盈数量和金额计算
            let totalProfitQty = 0;
            let totalProfitAmount = 0;
            
            // 盘亏数量和金额计算 (取绝对值)
            let totalLossQty = 0;
            let totalLossAmount = 0;
            
            checkData.value.forEach(item => {
                const profitLossNum = Number(item.profitandloss_num || 0);
                const profitLossAmount = Number(item.profitandloss_total || 0);
                
                if (profitLossNum > 0) {
                    totalProfitQty += profitLossNum;
                    totalProfitAmount += profitLossAmount;
                } else if (profitLossNum < 0) {
                    totalLossQty += Math.abs(profitLossNum);
                    totalLossAmount += Math.abs(profitLossAmount);
                }
            });

            return {
                totalItemTypes,
                totalQuantity,
                totalProfitQty,
                totalLossQty,
                totalProfitAmount: totalProfitAmount.toFixed(2),
                totalLossAmount: totalLossAmount.toFixed(2)
            };
        });

         // 入库合计计算
        const instockSummary = computed(() => {
            if (!instockData.value || instockData.value.length === 0) {
                return {
                    totalNum: 0,
                    totalAmount: '0.00'
                };
            }
            const totalNum = instockData.value.reduce((sum, item) => sum + Number(item.in_num), 0);
            const totalAmount = instockData.value.reduce((sum, item) => sum + Number(item.in_total), 0);
            return {
                totalNum,
                totalAmount: totalAmount.toFixed(2)
            };
        });



        //出库合计计算
        const outstockSummary = computed(() => {
            if (!outstockData.value || outstockData.value.length === 0) {
                return {
                    totalNum: 0,
                    totalAmount: '0.00'
                };
            }
            const totalNum = outstockData.value.reduce((sum, item) => sum + Number(item.out_num), 0);
            const totalAmount = outstockData.value.reduce((sum, item) => sum + Number(item.out_total), 0);

            return {
                totalNum,
                totalAmount: totalAmount.toFixed(2)
            };
        });

         const instockData=ref([]);
          //出库记录
        const outstockData=ref([]);

        //#region 查询对应信息
        function Select(){
            //查询盘点单信息
            http.get("/Check_h/GetCheck_hById?icid=" + checkid)
            .then(res=>{
                const data = res.data;
                checkform.createname = data.create_name;
                checkform.createtime = formatDateTime(data.create_time);
                checkform.type = data.ic_type;
                checkform.whname = data.wh_name;
                checkform.start_time = formatDateTime(data.start_time);
                checkform.end_time = formatDateTime(data.end_time);
                checkform.username = data.ic_user;
                checkform.status = getCheckStatus(data.ic_status);
                checkform.check_num = data.check_num;
                checkform.checkprofit_num = data.checkprofit_num;
                checkform.checklosses_num = data.checklosses_num;
                checkform.checkprofit_total = data.checkprofit_total;
                checkform.checklosses_total = data.checklosses_total;
                checkform.remark = data.remark;
            }).catch(err=>{
                console.log(err)
            })

            
            //查询附件
            http.get("/PublicFile/GetFilesByBusinessCode", {
                params: {
                    code: checkcode,
                    type: "盘点单"
                }
            })
            .then(res=>{
                if (res.data && res.data.length > 0) {
                    filelist.value = res.data.map(item => {
                        return {
                            name: item.title,
                            url: item.file_name
                        }
                    });
                }
            }).catch(err => {
                console.warn("获取附件信息失败，继续加载其他数据", err);
            });

            //查询明细信息
            http.get("/Check_d/GetCheck_Ds?icid=" + checkid)
            .then(async res => {
                const checklist = res.data;
                if (!checklist || checklist.length === 0) return;

                try {
                    // 获取仓库ID以便查询库存
                    const checkRes = await http.get("/Check_h/GetCheck_hById?icid=" + checkid);
                    const whid = checkRes.data.wh_id;
                    
                    // 获取仓库库存数据
                    const stockRes = await http.get("/Stock/GetStockwhid", {
                        params: {
                            whid: whid,
                        }
                    });
                    const stockData = stockRes.data || [];
                    
                    // 为每个明细获取完整的货品信息
                    const promises = checklist.map(detail =>
                        http.get("/Product/GetProductById?id=" + detail.proc_id).then(productRes => {
                            // 找到对应的库存信息
                            const stockInfo = stockData.find(s => s.proc_id === detail.proc_id) || {};
                            
                            return {
                                ...detail,
                                proc_name: productRes.data.proc_name,
                                proc_code: productRes.data.proc_code,
                                proc_model: productRes.data.proc_model,
                                proc_primary_unit: productRes.data.proc_primary_unit,
                                type_name: productRes.data.type_name,
                                // 添加库存数据
                                stk_hand_num: stockInfo.stk_hand_num || 0,
                                stk_total: stockInfo.stk_total || 0,
                            };
                        })
                    );

                    const completedItems = await Promise.all(promises);
                    checkData.value = completedItems;
                } catch (err) {
                    console.error("获取盘点明细数据失败:", err);
                    ElMessage.error("获取盘点明细数据失败");
                }
            }).catch(err => {
                console.log(err);
            });


            //查询入库记录
           http.get(`/Instock_h/GetAllInstock_hByCode?code=${checkcode}`).then(res=>{
                instockData.value = res.data.map(item=>{
                    return {
                        ...item,
                        in_date:formatDateTime(new Date(item.in_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                        update_time:formatDateTime(new Date(item.update_time)),
                        approver_time:formatDateTime(new Date(item.approver_time)),
                    }
                })
            });


            //查询出库记录
            http.get(`/Outstock_h/GetAllOutstock_hByCode?code=${checkcode}`).then(res=>{
                outstockData.value=res.data.map(item=>{
                    return {
                        ...item,
                        out_total:parseFloat(item.out_total).toFixed(2),
                        out_date:formatDateTime(new Date(item.out_date)),
                        create_time:formatDateTime(new Date(item.create_time)),
                    }
                });
            });
        }
        
        //#endregion


        //关闭
        function Close(){
            router.back();
        }


        //#region 跳转修改页面
         function ShowUpdate(){
            //传当前对应货品Id过去
            router.push({
                name:"checkupdate",
                params:{
                    checkid: checkid,
                    checkcode: checkcode,
                }
            })
        }
        //#endregion


        //#region 删除
            //删除模态框
            const DeleteDialogVisible=ref(false);
            //删除模态框
            function ShowDelete(){
                DeleteDialogVisible.value=true;
            }
            async function Delete(){
                try {
                    // 直接调用删除接口
                    const deleteRes = await http.delete("/Check_h/DeleteCheck_h?id=" + checkid);
                    if (deleteRes.data > 0) {
                        ElMessage({ message: '删除成功.', type: 'success' });
                        DeleteDialogVisible.value = false;
                        router.push({name:"check"});
                    } else {
                        ElMessage.error('删除失败.');
                    }
                } catch (err) {
                    console.error("删除失败:", err);
                    ElMessage.error('删除操作失败.');
                }
            }
        //#endregion

        //#region 执行
        //执行模态框
        const ExecuteDialogVisible=ref(false);

        function ShowExecute(){
            ExecuteDialogVisible.value = true;
        }

        function Execute(){
            http.put("/Check_h/ExecuteCheck?checkid=" + checkid)
            .then(res=>{
                if(res.data > 0){
                    ElMessage({
                        message: '执行成功，已自动生成出入库单.',
                        type: 'success',
                    })
                    Select();
                    ExecuteDialogVisible.value = false;
                }else{
                    ElMessage.error('执行失败.')
                }
            }).catch(err=>{
                console.log(err);
            })
        }
        //#endregion

        //#region 打印
        const printDialogVisible = ref(false);
        function showPrintDialog() {
            printDialogVisible.value = true;
        }
        function handlePrint() {
            window.print();
        }
        //#endregion


        //挂载
        onMounted(() => {
           GetStatus().then(()=>{
            Select();
           })
        });

        return{
            Close,
            filelist,
            user,
            checkform,
            formatDateTime,
            activeTab,
            ShowUpdate,
            DeleteDialogVisible,
            ShowDelete,
            Delete,
            printDialogVisible,
            showPrintDialog,
            handlePrint,
            statusMap,
            ExecuteDialogVisible,
            ShowExecute,
            Execute,
            checkData,
            summary,
            SelectChange,
            selectdata,
            Export,
            instockData,
            instockSummary,
            outstockData,
            outstockSummary
        }
    }
}
</script>
  
<style scoped>
    /* 白色圆角容器 - 核心样式 */
    .white-container {
        background: white;
        border-radius: 12px;
        margin-bottom: 50px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        width: 75%;
    }

    /* 底部操作栏自适应 */
    .action-bar {
        position: fixed;
        bottom: 0;
        right: 0.5%; /* 与表单右侧对齐 */
        left: 210px; /* 与菜单栏宽度一致 */
        background: white;
        border-top: 1px solid #e6e6e6;
        padding: 15px;
        text-align: right;
    }

    .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
    }

    .title {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
    }

    .btn-group > .el-button {
        margin-left: 10px;
    }

    .stock-bar {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 80px; /* 两列间距可调整 */
        margin: 20px 0;
    }

    .stock-item {
        text-align: center;
    }

    .stock-value {
        font-size: 22px;
        font-weight: bold;
        color: #222;
    }

    .stock-label {
        color: #888;
        font-size: 14px;
        margin-top: 4px;
    }
    .info-main-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start; /* 顶部对齐 */
        gap: 30px; /* 左右间距，可根据需要调整 */
    }

    /* 新增表格样式 */
    .info-content {
        padding: 20px;
        position: relative;
    }
    
    .info-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }
    
    .info-table td {
        padding: 10px 15px;
        font-size: 14px;
        color: #606266;
    }
    
    .info-table td:nth-child(odd) {
        width: 80px;
        color: #303133;
        font-weight: 500;
    }
    
    .status-box {
        position: absolute;
        top: 20px;
        right: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .status-label {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .status-value {
        font-size: 16px;
        font-weight: bold;
        color: #e6a23c;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    .summary-row > span {
        font-weight: bold;
    }

    .summary-item {
        margin-left: 25px;
        color: #606266;
    }

    .summary-item > span {
        font-weight: bold;
    }

    @media print {
        .no-print {
            display: none !important;
        }
    }
</style>